<!--
 * @Descripttion: 
 * @Author: wayde
 * @Date: 2021-04-16 11:43:33
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 300px;
      }
      #chart2 {
        width: 800px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div>这是第一个 echarts 图表</div>
    <div id="chart"></div>
    <div>这是第二个 echarts 图表</div>
    <div id="chart2"></div>
    <script>
      const chartDom = document.getElementById("chart");
      const chartDom2 = document.getElementById("chart2");
      const chart = echarts.init(chartDom);
      const chart2 = echarts.init(chartDom2);
      const option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {
              // 折线下方面积
              color: "#fff",
            },
            lineStyle: {
              color: "#00FF00", // 折线颜色
            },
            itemStyle: {
              normal: {
                color: "blue", //点的颜色
              },
            },
          },
        ],
      };
      const option2 = {
        legend: {
          data: ["高度(km)与气温(°C)变化关系", "高度(km)与气温(°C)变化关系2"],
        },
        tooltip: {
          trigger: "axis",
          formatter: "Temperature : <br/>{b}km : {c}°C",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} °C",
          },
        },
        yAxis: {
          type: "category",
          axisLine: { onZero: false },
          axisLabel: {
            formatter: "{value} km",
          },
          minorSplitLine: {
            show: true,
          },
          boundaryGap: false,
          data: ["0", "10", "20", "30", "40", "50", "60", "70", "80"],
        },
        series: [
          {
            name: "高度(km)与气温(°C)变化关系",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              color: "#00FF00",
              width: 3,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 8,
            },
            itemStyle: {
              normal: {
                color: "yellow", //点的颜色
              },
            },
            data: [14, -20, -50.5, -48.5, -10.1, -12.5, -7.7, -5.7, -6.5],
          },
          {
            name: "高度(km)与气温(°C)变化关系2",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              color: "blue",
              width: 3,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 8,
            },
            itemStyle: {
              normal: {
                color: "red", //点的颜色
              },
            },
            data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5],
          },
        ],
      };
      chart.setOption(option);
      chart2.setOption(option2);
    </script>
  </body>
</html>
